<!--A端月租费-->
<template>
  <div class='container'>
        <div class="a-rent-box">
            <el-form :model="formData" ref="formData" label-width="200px">
                <fieldset class="contain-box">
                <legend class="contain-title">国际半电路月租费</legend>
                    <el-alert
                        title="【双端境外的电路，可以修改A、Z端本地月租费，以修改后的金额结算海外公司】"
                        type="warning">
                    </el-alert>
                    <el-alert
                        title="非双端境外的电路，可以修改国际对端金额，收付不一样标志，以及币种"
                        type="warning">
                    </el-alert>
                    <el-alert
                        title="结算给海外公司的国际对端结算金额不可改】"
                        type="warning">
                    </el-alert>

                    <el-row>
                        <el-col :span="12">
                        <el-form-item
                            label="国际半电路月租费:"
                        >
                            <el-input
                            placeholder="请输入内容"
                            v-model="arr[0]['202106-221'].value"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="国际半电路月租费优惠率(%):"
                            prop="reAmountCause"
                        >
                            <el-input
                            placeholder="请输入内容"
                           v-model="arr[0]['202106-222'].value"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="境内段长途月租费:"
                            prop="reAmountCause"
                        >
                            <el-input
                            placeholder="请输入内容"
                            v-model="arr[0]['202106-223'].value"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item
                            label="境内段长途月租费优惠率(%):"
                            prop="reAmountCause"
                        >
                            <el-input
                            placeholder="请输入内容"
                            v-model="arr[0]['202106-224'].value"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="境内段本地月租费:"
                            prop="reAmountCause"
                        >
                            <el-input
                            placeholder="请输入内容"
                            v-model="arr[0]['202106-225'].value"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="境内段本地月租费优惠率(%):"
                            prop="reAmountCause"
                        >
                            <el-input
                            placeholder="请输入内容"
                            v-model="arr[0]['202106-226'].value"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item
                            label="境内段本地代维费"
                            prop="reAmountCause"
                        >
                            <el-input
                            placeholder="请输入内容"
                            v-model="arr[0]['202106-227'].value"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="应付对端金额"
                            prop="reAmountCause"
                        >
                            <el-input
                            placeholder="请输入内容"
                              v-model="arr[0]['202106-228'].value"
                            >
                            <i slot="suffix">币种</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                        <el-col :span="12">
                        <el-form-item
                            label="币种"
                            label-width="40px"
                            prop="reAmountCause"
                        >
                        <el-select v-model="arr[0]['202106-229'].value" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                    </el-row>
                </fieldset>
            </el-form>
       </div>
        <span slot="footer" class="dialog-footer">
        <div class="text-c">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="submitDialogHandel">确 定</el-button>
        </div>
        </span>
  </div>
</template>

<script>
import prodInfo from "@/utils/packet";
import CustOrderService from "@/api/order/CustOrderService";
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  name:"A端月租费",
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    ODKInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    CTOInfo: {
      type: [Array, Object],
      default: () => {
        return [];
      },
    },
  },
  // 这里存放数据
  data() {
    return {
      formData: {
        reAmountCause: "",
        value: ""
      },
      //  封装报文
      arr: [
        {
          // 国际半电路月租费：
          "202106-221": {
            actType: "MOD",
            tableName: "ordOfferInstFeeInfos",
            colId: "amount", //对应的字段
            roleCd: "C",
            value: "1",
            id: "202106-221",
            orderItemId:"1",
            attrRoleCd: "100",
            acctItemId: "3002000",

            relIds:
              "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166"
          },

          // 国际半电路月租费优惠率(%)：
          "202106-222": {
            actType: "MOD",
            tableName: "ordOfferInstFeeInfos",
            colId: "ratio", //对应的字段
            roleCd: "C",
            value: "0",
            id: "202106-2222",
            acctItemId: "3002000",

          },
          //境内段长途月租费：
          "202106-223": {
            actType: "MOD",
            tableName: "ordOfferInstFeeInfos",
            colId: "amount",
            coltype: "C",
            value: "0",
            id: "202106-2223",
            attrRoleCd: "100",
            acctItemId: "3003000",
            relIds:
              "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166"
          },

          // 境内段长途月租优惠率(%)：
          "202106-224": {
            actType: "MOD",
            tableName: "ordOfferInstFeeInfos",
            colId: "ratio",
            coltype: "C",
            value: "0",
            id: "202106-224",
            attrRoleCd: "100",
            acctItemId: "3003000",
            relIds:
              "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166"
          },
          //境内段本地月租费：
          "202106-225": {
            actType: "add",
            tableName: "ordOfferInstFeeInfos",
            colId: "amount",
            coltype: "C",
            value: "0",
            id: "202106-225",
            attrRoleCd: "100",
            acctItemId: "3001000",
            relIds:
              "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166"
          },
          // 境内段本地月租优惠率(%)：
          "202106-226": {
            actType: "MOD",
            tableName: "ordOfferInstFeeInfos",
            colId: "ratio",
            coltype: "C",
            value: "0",
            id: "202106-226",
            attrRoleCd: "100",
            acctItemId: "3001000",
            relIds:
              "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166"
          },
          // 境内段本地代维费：
          "202106-227": {
            actType: "add",
            tableName: "ordOfferInstFeeInfos",
            colId: "amount",
            coltype: "C",
            value: "0",
            id: "202106-2223",
            attrRoleCd: "100",
            acctItemId: "3009000",
            relIds:
              "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166"
          },
          // 应付对端金额：
          "202106-228": {
            actType: "MOD",
            tableName: "ordOfferInstFeeInfos",
            colId: "amount",
            coltype: "C",
            value: "0",
            id: "202106-228",
            attrRoleCd: "100",
            acctItemId: "",
            relIds:
              "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166"
          },
          // 币种
          "202106-229": {
            actType: "wwww",
            tableName: "ordOfferInstFeeInfos",
            colId: "amount",
            coltype: "C",
            value: "156",
            id: "202106-228",
            attrRoleCd: "100",
            acctItemId: "",
            relIds:
              "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166"
          },

          "202106-230": {
            actType: "MOD",
            tableName: "ordOfferInstFeeInfos",
            colId: "amount",
            coltype: "C",
            value: "156",
            id: "202106-228",
            attrRoleCd: "100",
            acctItemId: "",
            relIds:
              "41000010;100012610;100010009;100011534;100011056;100011694;100012993;100010007;100010008;100012516;100012632;100012493;100012494;100013123;100013131;100010191;100010006;100013166"
          },
        //   变更日志
          "202106-232": {
            actType: "ADD",
            tableName: "orderItemModifys",
            orderItemId: "",
            modId: "C",
            staffId: "",
            attrId:"",
            custOrderId :"",
            attrCd:"",
            oldAttrValue:"",
            attrValue:"",
            roleCd:"",
            custId:"",
            orderItemId:"",
            id: "202106-232",
          },
           "202106-233": {
             actType: "MOD",
            tableName: "orderItemModifys",
            orderItemId: "",
            modId: "C",
            staffId: "",
            attrId:"",
            custOrderId :"",
            attrCd:"",
            oldAttrValue:"",
            attrValue:"",
            roleCd:"",
            custId:"",
            orderItemId:"",
            id: "202106-233",
          },
           "202106-234": {
             actType: "MOD",
            tableName: "orderItemAttrModifys",
            orderItemId: "",
            modId: "C",
            staffId: "",
            attrId:"",
            custOrderId :"",
            attrCd:"",
            oldAttrValue:"",
            attrValue:"",
            roleCd:"",
            custId:"",
            orderItemId:"",
            id: "202106-233",
          },
            "202106-235": {
             actType: "MOD",
            tableName: "orderItemAttrModifys",
            orderItemId: "",
            modId: "C",
            attrId: "",
            attrCd:"",
            oldAttrValue :"",
            attrValue:"",
            roleCd:"",

            id: "202106-235",
          }
        }
      ],

      options: [
        {
          value: "156",
          label: "人民币"
        },
        {
          value: "840",
          label: "美元"
        }
      ]
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  mounted() {},
  // 方法集合
  methods: {
    async submitDialogHandel() {
      
       
        let result = [];
      this.arr.forEach(function(item, index) {
        for (let key in item) {
          result.push(item[key]);
        }
      });
      // 提交数据报文拼接
      
      let params = prodInfo.aMonthly(result,this.ODKInfo,this.CTOInfo,this.user.staffId);
      
      const res = await CustOrderService.savePointRent(params);
      if(res.meta.resultCode == '0'){
        this.$message({
          type: 'success',
          message: '保存成功!'
        });
        this.eventDoSearch();
        this.$emit('update:show',false);
      }else{
        this.$message({
          showClose: true,
          message: result.meta.resultMsg,
          type: 'error'
        });
      }
    },
    closeDialog() {
      this.$emit('update:show',false);
    },
  },
  // 监听属性 类似于data概念
  computed: {
		...mapState("orders", ["orderItemList"]),
		...mapState("user", ["user"]),
	},
  // 监控data中的数据变化
  watch: {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {},
  // 生命周期 - 数据挂载之前
  beforeMount() {},
  // 生命周期 - 数据更新之前
  beforeUpdate() {},
  // 生命周期 - 数据更新之后
  updated() {},
  // 生命周期 - 页面销毁之前
  beforeDestroy() {},
  // 生命周期 - 页面销毁完成
  destroyed() {}
};
</script>

<style  lang="scss" scoped>
/* @import url(); 引入公共css类 */
.a-rent-box {
  .contain-box {
    padding: 0.2rem;
    border: 1px solid #f56f3c;
  }
  .contain-title {
    margin-left: 0.4rem;
    padding: 0 0.1rem;
  }
  .radioBtn {
    padding-left: 0.2rem;
  }
  .el-alert {
    margin-bottom: 0.1rem;
  }
}
.text-c {
  text-align: center;
  margin: 0.2rem 0;
}
</style>
